<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-12-20 16:47:29
 * @LastEditors: charles
 * @LastEditTime: 2021-12-21 10:26:14
-->
<template>
  <div class="workorder">
    <van-nav-bar title="完成图片" />
    <!-- 图片上传 -->
    <div style="margin-bottom:2em">
      <van-uploader
      multiple
      :fileList="imgList"
      :max-count="3"
      result-type="file"
      :after-read="afterRead" />
    </div>


  </div>
</template>
<script>
import {get} from '../../utils/request'
import axios from 'axios'
import {Toast} from 'vant'

export default {
  data(){
    return {
      order:{},
      imgList:[]
    }
  },
  methods: {
    submitHandler(){
      let imgList = this.imgList;
      if(imgList.length < 3 ){
        Toast.fail('必须上传3张图片')
        return false;
      }
      let url = "/workorder/finishOrder"
      let params = {
        id:this.order.id,
        //图片在线地址
        photo1:imgList[0].url,  //required
        photo2:imgList[1].url,  //required
        photo3:imgList[2].url,  //required
        //获得当前时间戳，作为完成工单时间
        finish_time:new Date().getTime()
      }
      get(url,params)
          //上传成功返回
          .then(resp => {
        Toast.success(resp.message);
        this.$router.go(-1)
      })
    },
    // 上传图片
    afterRead(file){
      console.log(file);
      file.status = "uploading";
      file.message = "上传中...";
      // 将文件上传至服务器测试
      let url = "http://121.199.29.84:8001/file/upload";
      //初始化表单数据
      let params = new FormData();
      //添加文件，file.file图片解析后源码
      params.append("file", file.file);
      axios.post(url, params, {
        headers: { "Content-Type": "multipart/form-data" }
      })
      //返回图片在线地址
      .then(response => {
        file.status = "success";
        //baseUrl
        let url = 'http://121.199.29.84:8888/group1/'+response.data.data.id;
        //图片列表，将图片在线路径push入图片列表
        this.imgList.push({url});
      })
      .catch(error => {
        file.status = "failed";
        file.message = "上传失败";
        Toast("图片上传失败:" + error + " 请返回重新上传");
      });
    }
  },
  mounted() {
    this.order = this.$route.query;
  },
}
</script>
<style scoped>
.workorder {
  font-size: 12px;
  color: #666;
  padding-bottom: 50px;
  background-color: #f4f4f4
}


</style>
<style >
.van-uploader__wrapper {
  width:100%
}

.van-uploader__wrapper > div {
  flex:1
}

.van-uploader__wrapper > div .van-uploader__preview-image {
  width:100%
}
</style>
